<template>
    <div style="padding: 5%;">
        <h1>专家管理</h1>
        <!-- 查询表单 -->
        <div style="padding: 20px;">
            <a-form :form="searchForm" layout="inline">
                <!-- 查询表单项 -->
                <a-form-item label="姓名">
                    <a-input v-model="searchParams.realName" />
                </a-form-item>
                <a-form-item label="手机号">
                    <a-input v-model="searchParams.allPhoneNumber" />
                </a-form-item>
                <a-form-item>
                    <a-button type="primary" @click="search">查询</a-button>
                    <a-button type="primary" ghost @click="reset" style="margin-left: 10px;">重置</a-button>
                </a-form-item>
            </a-form>
        </div>
        <div style="text-align: right; margin: 10px;">
            <a-button type="primary" @click="showModal('add')">新增</a-button>&nbsp;&nbsp;
            <a-button type="primary" @click="showImportModal()">批量导入</a-button>
        </div>

        <!-- 列表展示 -->
        <a-table :columns="columns" :dataSource="dataSource" :loading="loading" :key="tableKey" :pagination="false">
            <template slot="action" slot-scope="text, record">
                <a-button @click="edit(record)">编辑</a-button>
                &nbsp;&nbsp;
                <a-popconfirm
                    title="是否确认删除此条数据?"
                    ok-text="是"
                    cancel-text="否"
                    @confirm="remove(record)"
                >
                    <a-button type="danger">删除</a-button>
                </a-popconfirm>
                &nbsp;&nbsp;
                <a-button type="primary" @click="lookFruit(record)">查看成果</a-button>
            </template>
        </a-table>
        <br/>
        <!-- 分页器 -->
        <a-pagination :show-total="total => `共${total}条`" :total="total" :current="pagination.current" :pageSize="pagination.pageSize" @change="handlePaginationChange" />

        <!-- 新增/编辑对话框 -->
        <a-modal v-model="modal.visible" :title="modal.title" @ok="handleOk" @cancel="handleCancel" width="800px">
            <!-- 表单项 -->
            <a-form :form="modalForm" :label-col="{ span: 8 }" :wrapper-col="{ span: 12 }" >
                <!-- 表单项 -->
                <a-form-item label="姓名" :required="true" :rules="[ { required: true, message: '请输入姓名' } ]">
                    <a-input v-model="modal.formData.realName" />
                </a-form-item>
                <a-form-item label="手机号">
                    <a-input v-model="modal.formData.allPhoneNumber" />
                </a-form-item>
                <a-form-item label="所属单位">
                    <a-input v-model="modal.formData.company" />
                </a-form-item>
                <a-form-item label="研究领域">
                    <a-input v-model="modal.formData.researchDomain" />
                </a-form-item>
                <a-form-item label="职级">
                    <a-select default-value="1" v-model="modal.formData.titleLevel" >
                        <a-select-option value="1">员级</a-select-option>
                        <a-select-option value="2">助级</a-select-option>
                        <a-select-option value="3">中级</a-select-option>
                        <a-select-option value="4">副高级</a-select-option>
                        <a-select-option value="5">正高级</a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item label="性别">
                    <a-select default-value="男" v-model="modal.sex" >
                        <a-select-option value="男">男</a-select-option>
                        <a-select-option value="女">女</a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item label="身份证号">
                    <a-input v-model="modal.formData.idNum" />
                </a-form-item>
                <a-form-item label="职称">
                    <a-select default-value="1" v-model="modal.formData.theTitle" >
                        <a-select-option value="1">基础员</a-select-option>
                        <a-select-option value="2">助理工程师</a-select-option>
                        <a-select-option value="3">中级工程师</a-select-option>
                        <a-select-option value="4">高级工程师</a-select-option>
                        <a-select-option value="5">正高级工程师</a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item label="邮箱">
                    <a-input v-model="modal.formData.mail" />
                </a-form-item>
                <a-form-item label="国籍">
                    <a-input v-model="modal.formData.nationality" />
                </a-form-item>
                <a-form-item label="政治面貌">
                    <a-input v-model="modal.formData.politicsStatus" />
                </a-form-item>
<!--                <a-form-item label="合作次数">-->
<!--                    <a-input v-model="modal.formData.cooperationNum" />-->
<!--                </a-form-item>-->
            </a-form>
        </a-modal>

        <a-drawer placement="right" width="1200" :maskClosable="false" @close="onClose" :visible="showFruitModal" title="查看成果">
            <talentFruit :talentId="talentId" v-if="showFruitModal"/>
        </a-drawer>

        <a-modal :width="600" v-model="importModal" title="导入" :mask-closable="false" :footer="null">
            <talent-tools/>
        </a-modal>

    </div>
</template>

<script>
import {postAction} from "@/api/manage";
import TalentFruit from "./TalentFruitManage";
import TalentTools from "./TalentTools";

export default {
    components: {
        TalentTools,
        TalentFruit
    },
    data() {
        return {
            searchForm: null,
            searchParams: {
                realName: "",
                allPhoneNumber: ""
            },
            tableKey: "",
            dataSource: [],
            columns: [
                {
                    title: "序号",
                    dataIndex: "key",
                    key: "key",
                    align: "center",
                    width: '5%',
                    customRender: (text,record,index) => `${index+1}`,//此处为重点
                },
                {
                    title: '姓名',
                    dataIndex: 'realName',
                    width: '10%'
                },
                {
                    title: '手机号',
                    dataIndex: 'allPhoneNumber',
                    key: 'allPhoneNumber',
                    ellipsis: true,
                    width: '10%'
                },
                {
                    title: '工作单位',
                    dataIndex: 'company',
                    key: 'company',
                    ellipsis: true,
                    width: '25%'
                },
                {
                    title: '研究领域',
                    dataIndex: 'researchDomain',
                    key: 'researchDomain',
                    ellipsis: true,
                    width: '15%'
                },
                // {
                //     title: '合作次数',
                //     dataIndex: 'cooperationNum',
                //     key: 'cooperationNum',
                //     width: '10%'
                // },
                // 其他列配置
                // ...
                {
                    title: '操作',
                    dataIndex: 'action',
                    scopedSlots: { customRender: 'action' }
                }
            ],
            loading: false,
            total: 0,
            pagination: {
                current: 1,
                pageSize: 10
            },
            modalForm: null,
            modal: {
                visible: false,
                title: '',
                record: null,
                formData: {}
            },
            showFruitModal: false,
            talentId: null,
            importModal: false
        };
    },
    methods: {
        search() {
          this.pagination.current = 1;
            this.fetchData();
        },
        reset() {
            this.searchParams = {};
            this.pagination = {
              current: 1,
              pageSize: 10
            };
            this.fetchData();
        },
        fetchData() {
            this.dataSource = [];
            this.loading = true;
            let url = "/ndTalent/talents/manage/list";
            let that = this;
            let obj = {
                ...this.searchParams,
                pageNo: this.pagination.current,
                pageSize: this.pagination.pageSize
            }
            this.tableKey = Math.random();
            postAction(url, obj).then(res => {
                if (res.data.success) {
                    that.dataSource = res.data.result.records;
                    that.total = parseInt(res.data.result.total);
                    this.loading = false;
                }
            }).catch(err => {
                console.log(err)
                this.loading = false;
            })
        },
        handlePaginationChange(page, pageSize) {
            this.pagination.current = page;
            this.pagination.pageSize = pageSize;
            this.fetchData();
        },
        showImportModal(){
            this.importModal = true;
        },
        edit(record) {
            this.showModal('edit', JSON.parse(JSON.stringify(record)));
        },
        showModal(type, record) {
            this.modal.type = type;
            this.modal.title = type === 'add' ? '新增专家' : '编辑专家';
            if(type != 'add'){
                this.modal.formData = record;
                let theTitle = record.theTitle;
                if(theTitle && theTitle.indexOf(",") > -1){
                    this.modal.formData.theTitle = theTitle.split(",")[0];
                }
            }else{
                this.modal.formData = {};
            }
            this.modal.visible = true;
        },
        async handleOk() {
            let url = "/ndTalent/talents/manage/saveOrUpdate";
            let that = this;

            postAction(url, this.modal.formData).then(res => {
                if (res.data.success) {
                    that.$message.success('操作成功');
                    this.modal.visible = false;
                    this.fetchData();
                }
            }).catch(err => {
                console.log(err)
            })
        },
        handleCancel() {
            this.modal.visible = false;
        },
        remove(record) {
            try {
                let url = "/ndTalent/talents/manage/delete";
                let that = this;
                postAction(url, record).then(res => {
                    if (res.data.success) {
                        that.$message.success('操作成功');
                      this.modal.visible = false;
                      this.fetchData();
                    }
                }).catch(err => {
                    console.log(err)
                })
            } catch (error) {
                console.error('Error deleting record:', error);
            }
        },
        lookFruit(record) {
            this.showFruitModal = true;
            this.talentId = record.id;
        },
        onClose() {
            this.showFruitModal = false;
        },
    },
    created() {
        this.fetchData();
    }
};
</script>

<style scoped>
/* 样式 */
</style>
